<%@page import="java.util.Calendar" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%Calendar now = Calendar.getInstance();%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; utf-8">
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/assets/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/assets/css/Site.css"/>
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/assets/css/animation.css"/>
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/assets/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/assets/css/bootstrap-theme.min.css"/>
    <script src="<%=request.getContextPath()%>/assets/js/jquery-1.10.2.js"></script>
    <script src="<%=request.getContextPath()%>/assets/js/jquery-1.10.2.min.js"></script>
    <!--   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
       <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
    <script type="text/javascript" src="<%=request.getContextPath()%>/assets/js/bootstrap.min.js"></script>
    <title>Connexion</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar j navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="<%=request.getContextPath()%>" lang="fr">Adventure Sports</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="<%=request.getContextPath()%>"><span class="glyphicon glyphicon-home">&nbsp;</span>Accueil
                    </a></li>
                    <li><a href="#">À propos de</a></li>
                    <li><a href="<%=request.getContextPath()%>/Site/Contact/contact.jsp"><span
                            class="glyphicon glyphicon-info-sign">&nbsp;</span>Contact</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                                            data-toggle="dropdown">Activité <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><span class="glyphicon glyphicon-eye-open">&nbsp;</span>Consulter</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                                            data-toggle="dropdown">Stage <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="<%=request.getContextPath()%>/StageManagerServlet?id=0"><span
                                    class="glyphicon glyphicon-search">&nbsp;</span>Rechercher</a></li>
                            <li class="divider"></li>
                            <li><a href="<%=request.getContextPath()%>/StageManagerServlet?nouveaute=0"><span
                                    class="glyphicon glyphicon-flash">&nbsp;</span>Nouveautées</a></li>
                            <li class="divider"></li>
                            <li><a href="<%=request.getContextPath()%>/StageManagerServlet?promo=0"><span
                                    class="glyphicon glyphicon-exclamation-sign">&nbsp;</span>Promo
                                (Last minute)</a></li>
                        </ul>
                    </li>

                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="<%=request.getContextPath()%>/Account/signin.jsp"><span
                            class="glyphicon glyphicon-pencil">&nbsp;</span>S'inscrire</a>
                    </li>
                    <% if (session.getAttribute("user") == null) { %>
                    <li><a href="<%=request.getContextPath()%>/Account/login.jsp"><span
                            class="glyphicon glyphicon-log-in">&nbsp;</span>Se connecter</a>
                            <% }  else { %>
                    <li><a href="<%= request.getContextPath()%>/CustomerManagerServlet?action=logout"><span
                            class="glyphicon glyphicon-log-out">&nbsp;</span>Se déconnecter</a>
                        <% }%>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</nav>
<div class="container">
    <div class="jumbotron">
        <h1 class="h1 animation" style="text-decoration: underline;">Connexion</h1>
    </div>
    <div class="container"><span class="text-danger"><%
        if (request.getAttribute("errorLogin") != null) {
            out.print(request.getAttribute("errorLogin"));
        }
    %></span>
        <br>
    </div>
    <br>

    <div class="table-responsive table-bordered"
         style="padding-left: 25px;">
        <form action="<%= request.getContextPath()%>/CustomerManagerServlet" method="post">


            <br> <br>
            <label class="control-label">Remplissez les champs avec vos données de connexion: </label>
            <br> <label class="control-label ">Les champs avec<span class="text-danger">&nbsp;* </span> sont
            obligatoire.</label>
            <br>

            <p class="text-danger"></p>
            <br>
            <span class="glyphicon glyphicon-user"></span> <label>Login: <span class="text-danger">*</span></label>
            <br> <input required="required" class="input-sm" size="40px" placeholder="Entrez votre login" type="text"
                        id="login" name="login"/>
            <br> <br>
            <span class="glyphicon glyphicon-lock"></span> <label>Mot de passe: <span class="text-danger">*</span>
        </label>
            <br> <input required="required" class="input-sm" size="40px" placeholder="Entrez votre mot de passe"
                        id="mdp" type="password" name="password">
            <br>
            <br>
            <input type="submit" value="Se connecter">  </br></br>
        </form>
    </div>
</div>
<hr>
<footer class="fixed-bottom">
    <table style="width: 100%;">
        <tr>
            <td valign="middle" style="text-align: left">
            <td valign="bottom"
                style="text-decoration: underline; text-align: center;">
                Copyright <% out.print(now.get(Calendar.YEAR));%>
                Adventure Sports &copy; v0.1.0 by <span style="color: red;">Le Groupe Rouge</span>
            </td>
            <td valign="middle" style="text-align: right"></td>
        </tr>
    </table>
</footer>
</body>
</html>
